<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-popover {
				display: none;
				position: fixed;
				width: 80%;
				height: auto;
				border-radius: 0;
				left: 50%;
				top: 50%;
				margin: 0 auto;
				z-index: 9999;
				background-color: #fff;
				-webkit-transform: translateX(-50%) translateY(-50%);
				-moz-transform: translateX(-50%) translateY(-50%);
				-ms-transform: translateX(-50%) translateY(-50%);
				transform: translateX(-50%) translateY(-50%);
			}
			
			.mui-popover-arrow {
				display: none;
			}
			.mui-input-row{
				margin-top: 1%;
			}
			.mui-input-clear{
				background-color: #FFFFFF!important;
			}
			.choose-div{
				width: 100%;
				background-color: #FFFFFF;
				padding-top: 3%;
			}
			.choose-div span{
				color: #A9A9A9;
				margin-left: 3%;
			}
			.mui-table-view{
				border: 0!important;
				margin-top: 3%;
			}
			.mui-table-view-cell{
				border: hidden!important;
			}
		</style>
	</head>

	<body>
		
		<!--弹出菜单-->
		<div id="pop" class="mui-popover">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#" data-index="0">校园兼职</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#" data-index="1">社会兼职</a>
				</li>
			</ul>
		</div>
		<header class="mui-bar mui-bar-nav" id="header">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">搜索</h1>
		</header>
		<div class="mui-content">
		    <div class="mui-input-row">
		        <input type="search" class="mui-input-clear" id="inputt" placeholder="发传单或笔记本电脑...">
		    </div>
		    <div class="choose-div">
		    	<span>选择你想搜索的类型</span>
			    <ul class="mui-table-view mui-table-view-radio">
					<li class="mui-table-view-cell mui-selected">
						<div class="mui-navigate-right" id="openPopover">
							兼职<div style="float: right;margin-right: -8%;font-size: 90%;color: #888888;width: 80%;text-align: end;"><span id="typejianzhi">点击选择兼职类型</span></div>
						</div>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-navigate-right">
							二手市场
						</div>
					</li>
				</ul>
			</div>
		    
		</div>
		
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/popover.js"></script>
		<script src="../../js/immersed.js"></script>
		<script type="text/javascript">
			(function($){
				$.init();
				$.plusReady(function(){
			    	starbar();
			    	plus.navigator.setStatusBarStyle('dark');
		
					//点击返回事件
					var old_back = mui.back;
					$.back = function() {
						old_back();
						plus.navigator.setStatusBarStyle('light');
					}
					
					var typefb = '';
					var search = document.getElementById('inputt');
					document.querySelector('.mui-table-view.mui-table-view-radio').addEventListener('selected',function(e){
						if(e.detail.el.innerText == "二手市场"){
							typefb = '2';
							search.setAttribute("placeholder","城市、商品、地区...");
							document.getElementById('typejianzhi').textContent = "点击选择兼职类型";
						}
					});
					
					var pop = new popover('#pop');
					document.querySelector('#openPopover').addEventListener('tap',function () {
					    pop.open();
					})					
					mui('.mui-table-view').on('tap','li a',function(){
						if(this.getAttribute('data-index') == 0){
							typefb = '0';
							search.setAttribute("placeholder","兼职关键字/薪酬/区");
						}else{
							typefb = '1';
							search.setAttribute("placeholder","兼职关键字/薪酬/区");
						}
					  	document.getElementById('typejianzhi').textContent = this.innerHTML;
					  	pop.close();
					})
					
					
					document.getElementById("inputt").addEventListener("keydown", function(e) {
						if(e.keyCode == 13) { //点击了“搜索” 
							if(search.value == ""){
								$.toast('搜索内容不能为空!');
								return ;
							}
							if(typefb == ''){
								$.alert('请先选择搜索类型再进行搜索!');
								return ;
							}
							var preView = plus.webview.currentWebview().opener(); //触发上一个页面刷新图片事件
                         	mui.fire(preView,'backcontent',{
                         		typeser: typefb,
                         		sercontent: search.value
                         	});
						    $.back();
						}
					}, false);
					
			    })
			})(mui);
		</script>
	</body>

</html>